<template>
  <div class="table-page">
    <Table
          border
          :columns="columns1"
          :data="data1"
          no-data-text
          no-filtered-data-text>
    </Table>
    <Page class="page-content"
          :total="totalPage"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          show-total
          show-sizer
          show-elevator
          @on-change="changePage"
          @on-page-size-change="changPageSize">
    </Page>
  </div>
</template>

<script>
export default {
  name: 'table_page_index',
  props: {
    columns1: {
      type: Array
    },
    data1: {
      type: Array
    },
    totalPage: {
      type: Number
    },
    pageSize: {
      type: Number
    },
    pageSizeOpts: {
      type: Array
    }
  },
  data () {
    return {}
  },
  created () {
    this.$nextTick(() => {
      // console.log(this)
    })
  },
  methods: {
    changePage (page) {
      this.$emit('change-page', page)
    },
    changPageSize (pageSize) {
      this.$emit('change-page-size', pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.page-content {
  margin-top: 20px;
}
</style>
